<template>
	<view class="loadText" :style="{ '--fss': app.theme.fss() }">
		<text v-if="load == 0" class="over" :style="{ color: color }">上拉加载更多</text>
		<view class="weui-loadmore" v-else-if="load == 1">
			<view class="weui-loading"></view>
			<text class="weui-loadmore__tips" :style="{ color: color }">正在加载中..</text>
		</view>
		<text v-else-if="load == 2" class="over" :style="{ color: color }">没有更多了</text>
	</view>
</template>

<script setup>
	import { ref, inject, defineProps } from "vue";
	const app = inject('app');
	
	/* props父组件传参区域 */
	// 接受props
	const prop = defineProps({
		
		// 是否加载中
		load: {
			type: Number,
			default: 0,
		},
		
		// 颜色
		color: {
			type: String,
			default: "rgba(255,255,255,0.5)"
		},
		
	});
</script>

<style lang="scss" scoped>
	.loadText {
		text-align: center;
		padding: 22rpx 0;
		.weui-loadmore {
			width: 65%;
			text-align: center;
			font-size: 25rpx;
			margin: 0 auto;
			line-height: 40rpx;
			.weui-loading {
				width: 28rpx;
				height: 28rpx;
				border: 4rpx solid rgba(146,146,146,0.2);
				border-bottom-color: rgba(168,168,168,0.7);
				border-radius: 50%;
				display: inline-block;
				animation: rotation 1s linear infinite;
				vertical-align: middle;
			}
			.weui-loadmore__tips {
				display: inline-block;
				vertical-align: middle;
				vertical-align: middle;
				margin-left: 14rpx;
				font-size: calc(26rpx * var(--fss));
			}
		}
		.over {
			font-size: calc(26rpx * var(--fss));
			line-height: 40rpx;
		}
		@keyframes rotation {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
	}
</style>
